<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>Tab效果</span>
      </div>
      <div class="frames">
        <div class="frame1">
          <div class="center">
            <div class="tabs">
              <div class="top"></div>

              <input type="radio" id="tab-1" name="rd" checked="checked" />
              <label class="tab" for="tab-1">
                <span class="fa fa-eye"></span>
              </label>

              <input type="radio" id="tab-2" name="rd" />
              <label class="tab" for="tab-2">
                <span class="fa fa-comments"></span>
              </label>

              <input type="radio" id="tab-3" name="rd" />
              <label class="tab" for="tab-3">
                <span class="fa fa-bell"></span>
              </label>

              <input type="radio" id="tab-4" name="rd" />
              <label class="tab" for="tab-4">
                <span class="fa fa-cog"></span>
              </label>

              <label class="tab search">
                <span class="fa fa-search"></span>
              </label>

              <div class="content">
                <div class="box" id="box-1">
                  <h1>Dashboard</h1>
                  <p>
                    <span style="width: 250px;"></span>
                    <span style="width: 270px;"></span>
                    <span style="width: 235px;"></span>
                    <span style="width: 260px;"></span>
                    <span style="width: 53px;"></span>
                  </p>
                  <p>
                    <span style="width: 262px;"></span>
                    <span style="width: 234px;"></span>
                    <span style="width: 246px;"></span>
                    <span style="width: 260px;"></span>
                    <span style="width: 144px;"></span>
                  </p>
                </div>

                <div class="box" id="box-2">
                  <h1>Comments</h1>
                  <p>
                    <span style="width: 250px;"></span>
                    <span style="width: 270px;"></span>
                    <span style="width: 235px;"></span>
                    <span style="width: 260px;"></span>
                    <span style="width: 53px;"></span>
                  </p>
                  <p>
                    <span style="width: 262px;"></span>
                    <span style="width: 234px;"></span>
                    <span style="width: 246px;"></span>
                    <span style="width: 260px;"></span>
                    <span style="width: 144px;"></span>
                  </p>
                </div>

                <div class="box" id="box-3">
                  <h1>Notifications</h1>
                  <p>
                    <span style="width: 250px;"></span>
                    <span style="width: 270px;"></span>
                    <span style="width: 235px;"></span>
                    <span style="width: 260px;"></span>
                    <span style="width: 53px;"></span>
                  </p>
                  <p>
                    <span style="width: 262px;"></span>
                    <span style="width: 234px;"></span>
                    <span style="width: 246px;"></span>
                    <span style="width: 260px;"></span>
                    <span style="width: 144px;"></span>
                  </p>
                </div>
                <div class="box" id="box-4">
                  <h1>Settings</h1>
                  <p>
                    <span style="width: 250px;"></span>
                    <span style="width: 270px;"></span>
                    <span style="width: 235px;"></span>
                    <span style="width: 260px;"></span>
                    <span style="width: 53px;"></span>
                  </p>
                  <p>
                    <span style="width: 262px;"></span>
                    <span style="width: 234px;"></span>
                    <span style="width: 246px;"></span>
                    <span style="width: 260px;"></span>
                    <span style="width: 144px;"></span>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="frame2">
          <div class="book">
            <div class="title">
              <div class="big">Vue<br />this<br />book</div>
              <div class="small">by its cover</div>
            </div>
          </div>
        </div>
        <div class="frame3">
          <svg width="76px" height="94px" viewBox="0 0 76 94" id="bulb">
            <path d="M76,37.037 C76,59.939 55.6428571,75.427 55.6428571,93.5 L20.3571429,93.5 C20.3571429,75.427 0,59.9335 0,37.037 C0,13.1505 18.9891429,0 37.9782857,0 C56.9891429,0 76,13.167 76,37.037 L76,37.037 Z"></path>
          </svg>
          <div id="glow"></div>
          <svg width="32px" height="33px" viewBox="0 0 32 33" id="base">
            <path d="M29.3333333,0 L2.66666667,0 C1.19466667,0 0,1.232 0,2.75 C0,4.268 1.19466667,5.5 2.66666667,5.5 L29.3333333,5.5 C30.8053333,5.5 32,4.268 32,2.75 C32,1.232 30.8053333,0 29.3333333,0 L29.3333333,0 Z M29.3333333,11 L2.66666667,11 C1.19466667,11 0,12.232 0,13.75 C0,15.268 1.19466667,16.5 2.66666667,16.5 L29.3333333,16.5 C30.8053333,16.5 32,15.268 32,13.75 C32,12.232 30.8053333,11 29.3333333,11 L29.3333333,11 Z M30.6666667,22 L1.33333333,22 L9.072,31.1245 C10.0853333,32.3125 11.552,33 13.088,33 L18.9173333,33 C20.4533333,33 21.9146667,32.3125 22.928,31.1245 L30.6666667,22 L30.6666667,22 Z"></path>
          </svg>
        </div>
        <div class="frame4">
          <div class="list">
            <div class="head">
              <div class="title">Sunday</div>
              <div class="subtitle">February 5, 2023</div>
            </div>
            <ul>
              <li>
                <input type="checkbox" id="item-1" name="item-1" />
                <label for="item-1" class="text">Create a list</label>
                <label for="item-1" class="button"></label>
                <svg width="15px" height="10px" class="checkmark">
                  <polyline points="1,5 6,9 14,1" />
                </svg>
              </li>
              <li>
                <input type="checkbox" id="item-2" name="item-2" />
                <label for="item-2" class="text">Complete first task</label>
                <label for="item-2" class="button"></label>
                <svg width="15px" height="10px" class="checkmark">
                  <polyline points="1,5 6,9 14,1" />
                </svg>
              </li>
              <li>
                <input type="checkbox" id="item-3" name="item-3" />
                <label for="item-3" class="text">Write some CSS code</label>
                <label for="item-3" class="button"></label>
                <svg width="15px" height="10px" class="checkmark">
                  <polyline points="1,5 6,9 14,1" />
                </svg>
              </li>
              <li>
                <input type="checkbox" id="item-4" name="item-4" />
                <label for="item-4" class="text">Amaze the world</label>
                <label for="item-4" class="button"></label>
                <svg width="15px" height="10px" class="checkmark">
                  <polyline points="1,5 6,9 14,1" />
                </svg>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'my-SmallCase'
}
</script>

<style lang="less" scoped>
.frames {
  display: flex;
  justify-content: flex-start;
}
.frame1 {
  position: relative;
  width: 320px;
  height: 240px;
}

.center {
  position: absolute;
  width: 320px;
  height: 240px;
  background: #fff;
  box-shadow: 4px 8px 12px 0 rgba(0, 0, 0, 0.3);

  .top {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: #3d4d5e;
  }

  input[type='radio'] {
    display: none;
  }

  .tab {
    position: relative;
    float: left;
    z-index: 5;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 38px;
    color: #8398ad;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.5s ease-in-out;

    &.search {
      float: right;
    }

    &:hover {
      color: #fff;
    }
  }

  input[type='radio']:checked + .tab {
    // background: #5da2ed;
    // background: #c2e4ff;
    background: #bdc3ff;
    color: #fff;
  }

  .content {
    position: absolute;
    top: 40px;
    color: #000;

    .box {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      transform: translateY(3px);
      pointer-events: none;
      padding: 25px;
      transition: all 0.3s ease-in;

      h1 {
        font-weight: 400;
        font-size: 16px;
        color: #415868;
        margin: 0;
        padding: 0;
      }

      p {
        margin: 17px 0;

        span {
          display: block;
          height: 4px;
          background: #e9e9e9;
          margin: 6px 0;
        }
      }
    }
  }
}

#tab-1:checked ~ .content #box-1,
#tab-2:checked ~ .content #box-2,
#tab-3:checked ~ .content #box-3,
#tab-4:checked ~ .content #box-4 {
  pointer-events: all;
  opacity: 1;
  transform: translateY(0);
  transition: all 0.5s ease-out 0.4s;
}
// 第二个
.frame2 {
  position: relative;
  width: 200px;
  height: 240px;
  color: #fff;
  margin: 0 20px;
}

.book {
  position: absolute;
  width: 200px;
  height: 240px;
  border-radius: 2px 4px 4px 2px;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2), -1px 4px 4px 0 rgba(0, 0, 0, 0.3);
  background: #1e1e1e;
  background: -moz-linear-gradient(45deg, #1e1e1e 0%, #4f4f4f 100%);
  background: -webkit-linear-gradient(45deg, #1e1e1e 0%, #4f4f4f 100%);
  background: linear-gradient(45deg, #1e1e1e 0%, #4f4f4f 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e1e1e', endColorstr='#4f4f4f',GradientType=1 );

  &:before {
    content: '';
    display: block;
    position: absolute;
    width: 20px;
    top: 0;
    left: 0;
    bottom: 0;
    border-radius: 2px 0 0 2px;
    /* http://colorzilla.com/gradient-editor/#ffffff+45,000000+49&0+0,0.15+20,0.15+84,0+100 */
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 45%, rgba(0, 0, 0, 0.15) 49%, rgba(0, 0, 0, 0.15) 84%, rgba(0, 0, 0, 0) 100%);
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 45%, rgba(0, 0, 0, 0.15) 49%, rgba(0, 0, 0, 0.15) 84%, rgba(0, 0, 0, 0) 100%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 45%, rgba(0, 0, 0, 0.15) 49%, rgba(0, 0, 0, 0.15) 84%, rgba(0, 0, 0, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00000000',GradientType=1 );
  }

  &:after {
    content: '';
    display: block;
    position: absolute;
    width: 10px;
    top: -1px;
    right: 25px;
    bottom: -1px;
    border-radius: 1px;
    box-shadow: -1px 0px 1px 0 rgba(0, 0, 0, 0.4);
    background: #a90329;
    background: -moz-linear-gradient(left, #a90329 0%, #8e0028 12%, #a90329 25%, #8e0028 37%, #a90329 50%, #8e0028 62%, #a90329 75%, #8e0028 87%, #a90329 100%);
    background: -webkit-linear-gradient(left, #a90329 0%, #8e0028 12%, #a90329 25%, #8e0028 37%, #a90329 50%, #8e0028 62%, #a90329 75%, #8e0028 87%, #a90329 100%);
    background: linear-gradient(to right, #a90329 0%, #8e0028 12%, #a90329 25%, #8e0028 37%, #a90329 50%, #8e0028 62%, #a90329 75%, #8e0028 87%, #a90329 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#a90329',GradientType=1 );
  }

  .title {
    position: absolute;
    top: 55px;
    left: 33px;

    .big {
      font-size: 36px;
      line-height: 100%;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .small {
      font-size: 13px;
      line-height: 160%;
      font-weight: 400;
      font-style: italic;
      padding-left: 2px;
      color: #ccc;
    }
  }
}
// 第三个
.frame3 {
  position: relative;
  width: 200px;
  height: 240px;
  border-radius: 2px;
  box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  background: #404556;
}

#bulb {
  position: absolute;
  z-index: 2;
  top: 50px;
  left: 66px;
  fill: #fff35c;
  transition: all 0.5s ease-in-out;
  cursor: pointer;

  &:hover {
    fill: #8c8f99;
  }
}
// #bulb:hover {
//   fill: #8c8f99;
// }

#glow {
  position: absolute;
  width: 76px;
  height: 76px;
  background: #fff35c;
  border-radius: 50px;
  box-shadow: 0 0 50px 10px #fff35c;
  top: 50px;
  left: 66px;
  transition: all 0.5s ease-in-out;
}

#bulb:hover ~ #glow {
  opacity: 0;
}

#base {
  position: absolute;
  top: 150px;
  left: 88px;
  fill: #e5e5e5;
}
svg:nth-child(1) {
  width: 76px;
  height: 94px;
}
svg:nth-child(3) {
  width: 32px;
  height: 33px;
}
// 第四个
// @import url(https://fonts.googleapis.com/css?family=Open+Sans:600,400);

.frame4 {
  position: relative;
  width: 240px;
  height: 240px;
  border-radius: 2px;
  margin-left: 20px;
  box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FDA231', endColorstr='#FDCA31',GradientType=1 );
  color: #497081;
  font-family: 'Open Sans', Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.list {
  position: absolute;
  width: 240px;
  height: 240px;
  background: #ffffff;
  box-shadow: 4px 8px 12px 0px rgba(0, 0, 0, 0.1);
  border-radius: 3px;

  .head {
    padding: 10px 0;
    margin: 0 30px;
    border-bottom: 1px solid #d4dce0;
  }

  .title {
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
  }

  .subtitle {
    font-size: 12px;
    line-height: 18px;
    text-align: center;
  }

  ul {
    list-style: none;
    padding: 4px 0;
    margin: 0 30px;

    li {
      position: relative;
      display: block;
      margin: 20px 0;
      height: 14px;
    }

    .text {
      float: left;
      font-size: 13px;
      line-height: 14px;
      cursor: pointer;
      transition: all 0.3s ease-in-out;
    }

    .button {
      position: relative;
      z-index: 2;
      box-sizing: border-box;
      float: right;
      width: 14px;
      height: 14px;
      border: 1px solid #497081;
      border-radius: 50%;
      cursor: pointer;
      transition: all 0.4s ease-out 0.5s;
    }

    .checkmark {
      position: absolute;
      top: 2px;
      right: -6px;
      stroke: #c8d4d9;
      fill: none;
      stroke-width: 1.5;
      stroke-dasharray: 30 30;
      stroke-dashoffset: 30;
      transition: all 0.5s ease-out;
    }

    input {
      display: none;

      &:checked ~ .text {
        color: #c8d4d9;
      }

      &:checked ~ .button {
        transition: all 0.4s ease-in;
        transform: scale(1.5);
        opacity: 0;
      }

      &:checked ~ .checkmark {
        stroke-dashoffset: 0;
        transition: all 0.5s ease-out 0.4s;
      }
    }
  }
}
</style>
